<template>
    <eui-background type="common">
        <eui-nav-bar ref="BcmNavBar" title="发退货配送" />
        <view class="footer" :style="{ height: height + 'px' }" style="padding: 18rpx 15rpx;">
            <view
                style="width: 100%; background: #fff;padding: 20rpx;color:#4c4c4c;box-sizing: border-box;border-radius: 8rpx;">
                <view>
                    <view style="font-size: 36rpx;color: #000;margin-bottom: 25rpx;" class="bold">收货人信息</view>
                    <view class="flex just-between" style="font-size: 30rpx;line-height: 40rpx;">
                        <view>
                            <view style="height: 40rpx;">收货人：{{ consigneeName }}</view>
                            <view style="height: 40rpx;">收货人手机：{{ consigneePhone }}</view>
                        </view>
                        <view style="width:60rpx;height: 60rpx;border-radius: 60rpx;background:#EDEDED;"
                            class="flex align-center just-center" @click="openContactCustPop" v-if="!!consigneePhone">
                            <image :src="_img_tel" style="height: 35rpx;width: 35rpx;"></image>
                        </view>
                    </view>
                    <view style="font-size: 30rpx;line-height: 40rpx;">收货人地址：{{ consigneeAddress }}</view>
                    <view style="font-size: 30rpx;line-height: 40rpx;">取件时间：{{ pickTime }}</view>
                </view>
            </view>
            <scroll-view scroll-y="true" class="bg-white"
                style="width: 100%;padding: 30rpx 20rpx;box-sizing: border-box;margin-top: 20rpx;border-radius: 8rpx;">
                <view v-if="list.length > 0">
                    <view style="margin-bottom: 20rpx;"><text class="bold">选择配送方</text>(预计配送费)</view>
                    <view v-for="(item, index) in list" :key="index">
                        <radio-group @change="selectItem">
                            <view :key="index" style="border-bottom: 1rpx solid #e1e1e1;padding: 15rpx 0;">
                                <radio :value="item.key" :checked="value === item.key" :disabled="item.status == '0'">
                                    <view>
                                        <view>{{ (!!item.deliveryActualFee || item.deliveryActualFee == 0) ?
                                            `${item.title}
                                            (¥${(item.deliveryActualFee).toFixed(2)})` :
                                            `${item.title}` }}</view>
                                        <view style="color: red;font-size: 22rpx;" v-if="item.status == '0'">{{
                                            item.unavailableReason }}</view>
                                    </view>
                                </radio>
                            </view>
                        </radio-group>
                    </view>
                </view>
                <view v-else>暂无可用配送方，请前往门店设置！</view>
            </scroll-view>
        </view>
        <view class="bottom" v-if="list.length > 0">
            <eui-button title="确认" type="min" singleTag="confirm" @buttonClick="buttonClick"
                style="width: 100%;height: 86rpx;line-height: 86rpx;border-radius: 0;margin: 0;font-size: 28rpx;padding: 0;"
                :disabled="!value"></eui-button>
        </view>
        <template>
            <view>
                <eui-popup ref="contactCustPopup" type="bottom" :animation="false" background-color="#fff"
                    :mask-click="false">
                    <view class="popup-content">
                        <view class="popup-title flex just-between">
                            <view style="font-weight: bold;">
                                联系顾客
                            </view>
                            <bcm-close-btn @click="closeContactCustPopup"></bcm-close-btn>
                        </view>
                        <view
                            style="padding-left: 30rpx;color: #000;background-color:#fff;box-sizing: border-box;padding-top:24rpx;text-align: left">
                            <view>
                                <text v-if="!!consigneeName">姓名：{{ consigneeName }}</text><text
                                    v-if="!!consigneePhoneLast">(尾号{{ consigneePhoneLast }})</text>
                            </view>
                            <view>
                                <text v-if="!!consigneePhone">电话：{{ consigneePhone }}</text>
                            </view>
                            <view class="bottom-1" style="margin: 100rpx 0 50rpx 0;">
                                <eui-button type="max2" title="拨打电话" style="width: 50%" singlTag="submit"
                                    @buttonClick="buttonClick" />
                            </view>
                        </view>
                    </view>
                </eui-popup>
            </view>
        </template>
    </eui-background>
</template>
<script setup>
import { mapState, mapMutations } from 'vuex';
import { ref, computed, onMounted } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import service from '../../../common/service';
import { bcmRequest, getBcmUrl } from '../../../hooks/bcmServices';
import { getBcmDictName, makePhoneCall } from '../../../hooks/bcmUseUntils';
import { formatTimeRangeText } from '../../../hooks/useDatetimeUtil'
import _img_tel from '../../../static/img/bcmIcons/tel.png'
import BcmCloseBtn from '../components/BcmCloseBtn.vue'
const bcmUrl = getBcmUrl()

const value = ref('')
const consigneeName = ref('')
const consigneePhone = ref('')
const consigneePhoneLast = ref('')
const consigneeAddress = ref('')
const height = ref(0)
const list = ref([])
const contactCustPopup = ref(false)
const pickTime = ref('')

onMounted(() => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数
            let info = uni.createSelectorQuery().select(".navigation");
            info.boundingClientRect(function (data) { //data - 各种参数
                height.value = res.windowHeight - data.height - 100;
            }).exec()
        }
    });
})
const getAll = async function (BillId) {
    let arr = [];
    service.enjoyShowLoading('正在查询...');
    let ObjectData = {
        BillId
    }
    const response = await bcmRequest(bcmUrl.orderApi, '售后单表', 'QueryUsableDeliveryPlatformList', ObjectData);
    service.enjoyHideLoading();
    response?.map(v => {
        let title = getBcmDictName('deliveryPlatformType', v.deliveryPlatformType);
        arr.push({
            ...v,
            title: v.serviceName ? title + '-' + v.serviceName : title,
            key: v.storeDeliveryId + (!!v.deliveryServiceCode ? '-' + v.deliveryServiceCode : '')
        })
    })
    list.value = arr;
}

const selectItem = function (item) {
    value.value = item.detail.value;
}

const buttonClick = async function (t, v) {
    const { singleTag } = t;
    switch (singleTag) {
        case 'confirm':
            if (!value.value) {
                uni.showToast({
                    title: '请选择配送方',
                    icon: 'none'
                });
                return;
            }
            service.enjoyShowLoading('正在处理...');
            let item = list.value.find(v => v.key == value.value);
            let params = {
                ...item
            }
            await bcmRequest(bcmUrl.orderApi, '售后单表', 'ConfirmSendDelivery', params);
            service.enjoyHideLoading();
            uni.showToast({
                title: '操作成功！',
                icon: 'none'
            });
            setTimeout(() => {
                uni.navigateBack({
                    delta: 1
                });
                uni.$emit('REFRESH_AFS_ORDER_DETAIL_DATA');
            }, 1000)
            break;
        case 'submit':
            // #ifdef APP-PLUS
            // plus.device.dial(consigneePhone.value, true);
            makePhoneCall(consigneePhone.value)
            // #endif
            break;
    }
}
const openContactCustPop = function () {
    contactCustPopup.value.open('bottom');
}
const closeContactCustPopup = function () {
    contactCustPopup.value.close();
}

onLoad((options) => {
    let orderItem = JSON.parse(decodeURIComponent(options.orderItem));
    consigneeName.value = orderItem.consigneeName;
    consigneePhone.value = orderItem.consigneePhone;
    consigneePhoneLast.value = orderItem.consigneePhoneLast;
    consigneeAddress.value = orderItem.consigneeAddress;
    if (!!orderItem.expectPickUpStartTime && !!orderItem.expectPickUpEndTime) {
        pickTime.value = formatTimeRangeText(orderItem.expectPickUpStartTime, orderItem.expectPickUpEndTime)
    }
    getAll(orderItem.afsOrderId)
})

</script>
<style lang="scss" scoped>
@import "@/static/font/enjoyicon/iconfont.css";
@import "../common/common.css";

uni-checkbox {
  ::v-deep .uni-checkbox-input {
    // width: 22rpx;
    // height: 22rpx;
    transform: scale(.6);
    // margin-right: 17rpx;
  }
}

.content {
  // background-color: $uni-background;
  padding: 0;
}

.navigation {
  flex: 0 0 auto;
}

.content-img {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  // background: $uni-background-img;
  background-size: 100% 150px;
}

.footer {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #f5f7fa;
}

.align-center {
  align-items: center;
}

.bottom {
  height: 86rpx;
}

.bottom-1 {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  height: 70rpx;
  padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
  background: $uni-bg-color;
}

//list
.goods-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
  border-bottom: 1rpx solid #e1e1e1;
}

.goods-info {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.goods-name {
  margin-bottom: 2px;
  font-size: 25rpx;
  line-height: 35rpx;
}

.goods-price {
  font-size: 25rpx;
  text-align: right;
}

.goods-quantity {
  color: #626262;
  font-size: 25rpx;
}

.popup-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #fff;

  .popup-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100rpx;
    padding-right: 36rpx;
    padding-left: 30rpx;
    font-size: 33rpx;
    line-height: 100rpx;
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
